<template>
    <div class="left">
        <div class="left-title">
            <button @click="onTabChange(item,index)" class="tab-btn" v-for="(item,index) in tabList" :key="index">
                <span>{{item.name}}</span>
                <img :src="currentTabIndex==index?activeTabIcon:defaultTabIcon" alt="">
            </button>
            <div class="date-row">
                <img src="../../assets/dp1/date-bg1.png" alt="">
                <div class="date-row-wrapper">
                    <span class="date">{{nowDate.date}}</span>
                    <span class="week">{{nowDate.weekDay}}</span>
                </div>
            </div>
        </div>
        <div class="left-content1">
            <div class="title1 light-text">党建总体情况</div>
            <div class="stat-container">
                <div v-for="(item,index) in statConfig1" :key="index" class="stat-row">
                    <div class="stat-title">{{item.name}}</div>
                    <div class="stat-num">{{item.num}}</div>
                    <img src="../../assets/dp1/stat-bg.png" alt="">
                </div>
            </div>
            <img src="../../assets/dp1/left-line1.png" alt="">
            <div class="flex relative">

                <div class="relative">
                    <div class="light-text stat-text1">党组织情况统计</div>
                    <div id="stat1" class="stat1"></div>
                </div>
                <div class="relative">
                    <div class="light-text stat-text2">党员积分</div>
                    <div id="stat2" class="stat2"></div>
                </div>
                <div class="relative">
                    <div class="light-text stat-text3">党建学习情况统计</div>
                    <div id="stat3" class="stat3"></div>
                </div>
            </div>

        </div>
        <div class="left-content2">
            <div class="left-content2-title">
                <div class="title-row">
                    <div class="title-text">
                        阳光政务面对面
                    </div>
                    <div class="title-info">
                        <div class="info1">
                            <span>活动期数 : </span>
                            <span class="yellow font-14">{{faceTofaceData.period || 0}}</span>
                        </div>
                        <span class="info2 yellow">{{faceTofaceData.finishRate || 0}}
                            <span class="font-12">%</span>
                        </span>
                        <div class="info3">
                            <div>
                                <span class="info-label">征集堵点 : </span>
                                <span class="yellow font-12">{{faceTofaceData.collectPoint || 0}}</span>
                            </div>
                            <div>
                                <span class="info-label">解决堵点 : </span>
                                <span class="yellow font-12">{{faceTofaceData.solvePoint || 0}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="bjl-text">办结率</div>
                    <img src="../../assets/dp1/left-title2.png" alt="">
                </div>
                <div class="title-row">
                    <div class="title-text">
                        容缺预受理
                    </div>
                    <div class="title-info">
                        <div class="info1">
                            <span>总件数 : </span>
                            <span class="yellow font-14">{{rqyslData.total || 0}}</span>
                        </div>
                        <span class="info2 yellow">{{rqyslData.finishRate || 0}}
                            <span class="font-12">%</span>
                        </span>
                        <div class="info3">
                            <div>
                                <span class="info-label">已办结 : </span>
                                <span class="yellow font-14"> {{rqyslData.finishAmount || 0}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="bjl-text">办结率</div>
                    <img src="../../assets/dp1/left-title2.png" alt="">
                </div>
                <div class="title-row">
                    <div class="title-text">
                        并行并联情况
                    </div>
                    <div class="title-info">
                        <div class="info1">
                            <span>并行并联 : </span>
                            <span class="yellow font-14">{{bxblData.parallelAmount || 0}}</span>
                        </div>
                        <span class="info2 yellow">{{bxblData.finishRate || 0}}
                            <span class="font-12">%</span>
                        </span>
                        <div class="info3">
                            <div>
                                <span class="info-label">涉及环节 : </span>
                                <span class="yellow font-14"> {{bxblData.departmentAmount || 0}}</span>
                            </div>
                            <div>
                                <span class="info-label">&nbsp;&nbsp;已办结 : </span>
                                <span class="yellow font-14"> {{bxblData.finishAmount || 0}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="bjl-text">办结率</div>
                    <img src="../../assets/dp1/left-title2.png" alt="">
                </div>
            </div>
            <div class="left-content2-stat">
                <div class="left-content2-stat-title">
                    <div class="zwsp-row">
                        <div class="relative">
                            <span class="light-text zwsp-text">政务审批</span>
                            <img src="../../assets/dp1/left-zwsp-title.png" alt="">
                        </div>
                        <div class="zwsp-percent-container">
                            <img class="zwsp-circle" src="../../assets/dp1/zwsp-circle.png" alt="">
                            <div class="">
                                <span id="zwspbjl" class="zwsp-num">{{zwspData.finishRate || 0}}</span>
                                <span class="yellow">%</span>
                            </div>
                            <div class="font-12">办结率</div>
                        </div>
                    </div>
                </div>
                <div class="sl-stat">
                    <div class="flex">
                        <div  class="sl-stat-row">
                            <div id = "yjsNum" class="bj-num Odometer sl-stat-num">0</div>
                            <div>已接收</div>
                        </div>
                            <div  class="sl-stat-row">
                            <div id = "ybjNum" class="bj-num Odometer sl-stat-num">0</div>
                            <div>已办件</div>
                        </div>
                            <div  class="sl-stat-row">
                            <div id = "yyNum" class="bj-num Odometer sl-stat-num">0</div>
                            <div>预约</div>
                        </div>
                            <div  class="sl-stat-row">
                            <div id = "dhNum" class="bj-num Odometer sl-stat-num">0</div>
                            <div>等候</div>
                        </div>
                    </div>
                    <div class="window-stat">
                        <div class="window-top-title">
                            <span>取号窗口TOP3</span>
                            <img src="../../assets/dp1/left-top-title.png" alt="">
                        </div>
                        <div class="flex">
                            <div>
                                <div v-for="(item,index) in topWindowList" :key="index" class="window-label">{{item.windowNum}}号窗口</div>
                            </div>
                            <div id="stat5">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="fl-stat">
                    <div class="fl-stat-title">
                        <span class="fl-title-text light-text">各分类情况</span>
                        <img src="../../assets/dp1/left-flqk-title.png" alt="">
                    </div>
                    <div class="flex">
                        <div v-for="(item,index) in statConfig3" :key="index" class="fl-stat-row">
                            <div class="stat-row-title">{{item.name}}</div>
                            <div class="relative">
                                <img src="../../assets/dp1/left-flqk.png" alt="">
                                <div class="fl-stat-num">{{item.num1}}</div>
                                <div class="fl-stat-total">{{item.num2}}</div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import { option1, option2, option3, option5 } from "./statConfig";
import {
    getDjztqk,
    getDzzqktj,
    getDyjf,
    getDjxxqk,
    getYgzwmdmtj,
    getRqysl,
    getBxbl,
    getZwspbj,
    getTopWindow,
    getGflqk,
    getZwspyy
} from "../../config/api";
import Pubsub from "../../utils/pubsub";
import Odometer from "../../lib/odometer";

let defaultTabIcon = require("../../assets/dp1/dj-default-tab.png");
let activeTabIcon = require("../../assets/dp1/dj-active-tab.png");
let defaultStatconfig1 = {
    dzzs: { num: 0, name: "党组织数" },
    dysl: { num: 0, name: "党员数量" },
    lxyz: { num: 0, name: "学习强国" },
    shyk: { num: 0, name: "三会一课" },
    dzzhd: { num: 0, name: "不忘初心 牢记使命" }
};
let defaultStatconfig2 = {
    yjs: { name: "已接收", num: 0 },
    ybj: { name: "已办件", num: 0 },
    yy: { name: "预约", num: 0 },
    dh: { name: "等候", num: 0 }
};
let defaultStatconfig3 = {
    ytq: { name: "一趟清", num1: 0, num2: 0 },
    ljm: { name: "零见面", num1: 0, num2: 0 },
    wsb: { name: "网上办", num1: 0, num2: 0 },
    yyb: { name: "预约办", num1: 0, num2: 0 }
};
export default {
    props: ["nowDate"],
    data() {
        return {
            commonRequest: {
                town: "all",
                type: ""
            },
            tabList: [
                { name: "累积", type: "" },
                { name: "当年", type: "year" },
                { name: "当月", type: "month" },
                { name: "当日", type: "today" }
            ],
            defaultTabIcon,
            activeTabIcon,
            statConfig1: [], //统计数量
            statConfig3: [], //各分类情况
            currentTabIndex: "0", //当前选中tab下标
            faceTofaceData: {}, //阳光政务面对面
            rqyslData: {}, //容缺预受理统计
            bxblData: {}, //并行并联统计
            zwspData: {}, //政务审批
            topWindowList: {} //取号窗口top3
        };
    },
    mounted() {
        this.initData();
        this.initStatConfig();
        this.initCharts();
        this.setPubsub();
        this.pubsub_token1 = Pubsub.subscribe("refreshDpData", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.initData();
        });
        // this.zwspbjlNum = new Odometer("#zwspbjl", {//政务审批办结率
        //     num: 0
        // });
        this.yjsNum = new Odometer("#yjsNum", {//已接收
            num: 0
        });
        this.ybjNum = new Odometer("#ybjNum", {//已办件
            num: 0
        });
        this.yyNum = new Odometer("#yyNum", {//预约
            num: 0
        });
        this.dhNum = new Odometer("#dhNum", {//等候
            num: 0
        });
    },

    destroyed() {
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
        this.pubsub_token2 && Pubsub.unsubscribe(this.pubsub_token2);
        this.pubsub_token3 && Pubsub.unsubscribe(this.pubsub_token3);
        this.pubsub_token4 && Pubsub.unsubscribe(this.pubsub_token4);
        this.pubsub_token5 && Pubsub.unsubscribe(this.pubsub_token5);
        this.pubsub_token6 && Pubsub.unsubscribe(this.pubsub_token6);
        this.pubsub_token7 && Pubsub.unsubscribe(this.pubsub_token7);
    },
    methods: {
        /**
         * 监听ws变化后请求不同接口
         */
        setPubsub(){
            this.pubsub_token2 = Pubsub.subscribe("ALL_SCREEN_TO_FACE",()=>{//阳光政务面对面
                this.getYgzwmdmtjData();
            });
            this.pubsub_token3 = Pubsub.subscribe("ALL_SCREEN_PRE_ACCEPT",()=>{//容缺预受理
                this.getYgzwmdmtjData();
            });
            this.pubsub_token4 = Pubsub.subscribe("ALL_SCREEN_PARALLEL",()=>{//并行并联
                this.getYgzwmdmtjData();
            });
            this.pubsub_token5 = Pubsub.subscribe("ALL_SCREEN_ZWSP_FINISH_RATE",()=>{//政务审批--办结率
                this.getZwspbjData();
            });
            this.pubsub_token6 = Pubsub.subscribe("ALL_SCREEN_ZWSP_ORDER_WAIT",()=>{//政务审批--预约和等候
                this.getZwspyyData();
            });
            this.pubsub_token7 = Pubsub.subscribe("ALL_SCREEN_ZWSP_TOP3",()=>{//政务审批--窗口top3
                this.getTopWindowData();
            });
             this.pubsub_token8 = Pubsub.subscribe("ALL_SCREEN_ZWSP_TYPE_COUNT",()=>{//政务审批--各类型统计
                this.getGflqkData();
            });
        },
        initData() {
            this.getDjztqkData();
            this.getDzzqktjData();
            this.getDyjfData();
            this.getDjxxqkData();
            this.getYgzwmdmtjData();
            this.getRqyslData();
            this.getBxblData();
            this.getZwspbjData();
            this.getTopWindowData();
            this.getGflqkData();
            this.getZwspyyData();
        },
        initCharts() {
            this.myChart1 = echarts.init(document.getElementById("stat1"));
            this.myChart2 = echarts.init(document.getElementById("stat2"));
            this.myChart3 = echarts.init(document.getElementById("stat3"));
            this.myChart5 = echarts.init(document.getElementById("stat5"));
            this.myChart1.setOption(option1);
            this.myChart2.setOption(option2);
            this.myChart3.setOption(option3);
            this.myChart5.setOption(option5);
        },
        /**
         * 获取党建整体情况
         */
        getDjztqkData() {
            getDjztqk(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                this.statConfig1[0].num = data.orgcount || 0;
                this.statConfig1[1].num = data.usercount || 0;
                this.statConfig1[2].num = data.lxyz || 0;
                this.statConfig1[3].num = data.shyk || 0;
                this.statConfig1[4].num = data.hd || 0;
            });
        },
        /**
         * 党组织情况统计
         */
        getDzzqktjData() {
            getDzzqktj(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                let { label, town, labelTotalMap } = data;
                let series = [];
                for (let i in labelTotalMap) {
                    series.push({
                        name: i,
                        type: "bar",
                        stack: "总量",
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        data: labelTotalMap[i]
                    });
                }
                this.myChart1.setOption({
                    legend: {
                        data: label
                    },
                    xAxis: {
                        data: town
                    },
                    series
                });
            });
        },
        /**
         * 党员积分
         */
        getDyjfData() {
            getDyjf(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                let legendData = [],
                    series = [];
                let optionPlaceHolderStyle2 = {
                    normal: {
                        color: "transparent",
                        borderColor: "rgba(255,255,255,.3)",
                        borderType: "dashed",
                        label: { show: false },
                        labelLine: { show: false }
                    }
                };
                data.map(item => {
                    let title = `${item.scoreMGroup}的人数占比${item.ratio}%`;
                    series.push({
                        type:"pie",
                        data: [
                            {
                                value: item.ratio,
                                name: title
                            },
                            {
                                value: 100 - item.ratio,
                                name: "",
                                itemStyle: optionPlaceHolderStyle2
                            }
                        ]
                    });
                    legendData.push(title);
                });
                console.log(series,"series");
                console.log(legendData,"legendData");
                this.myChart2.setOption({
                    legend: {
                        data: legendData
                    },
                    series
                });
            });
        },
        /**
         * 党建学习情况
         */
        getDjxxqkData() {
            getDjxxqk(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                let { lxyz, shyk } = data;
                let abLxyz = [];
                lxyz.map(item => {
                    abLxyz.push(-item);
                });
                let series = [{}, {}];
                series[0] = { data: shyk };
                series[1] = { data: abLxyz };
                this.myChart3.setOption({
                    yAxis: {
                        data: data.town
                    },
                    series
                });
            });
        },
        /**
         * 阳光面对面
         */
        getYgzwmdmtjData() {
            getYgzwmdmtj(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                this.faceTofaceData = data;
            });
        },
        /**
         * 容缺预受理统计
         */
        getRqyslData() {
            getRqysl(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                this.rqyslData = data;
            });
        },

        /**
         * 并行并联统计
         */
        getBxblData() {
            getBxbl(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                this.bxblData = data;
            });
        },
        /**
         * 政务审批办结率、已接件、已办件
         */
        getZwspbjData() {
            getZwspbj(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                this.zwspData = data;
                // this.zwspbjlNum.update(data.finishRate || 0);
                this.yjsNum.update(data.allCount || 0);
                this.ybjNum.update(data.finishCount || 0);
            });
        },
        /**
         * 政务审批预约、等待
         */
        getZwspyyData() {
            getZwspyy(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                this.yyNum.update(data.orderCount || 0);
                this.dhNum.update(data.waitCount || 0);
            });
        },
        /**
         * 取号窗口top3
         */
        getTopWindowData() {
            getTopWindow(this.commonRequest).then((result = {}) => {
                let data = result.data || [];
                let max = 0,
                    maxArr = [],
                    series = [];
                data.map(item => {
                    max += parseInt(item.handleCount);
                    maxArr.push(item.handleCount);
                });
                series[0] = { data: [max, max, max] };
                series[1] = { data: maxArr.reverse() };
                this.topWindowList = data;
                this.myChart5.setOption({
                    series
                });
                // this.zwspData = data;
            });
        },
        /**
         * 各分类情况
         */
        getGflqkData() {
            getGflqk(this.commonRequest).then((result = {}) => {
                let data = result.data || {};
                let { once = {}, online = {}, order = {}, remote = {} } = data;
                this.statConfig3[0].num1 = once.handling || 0;
                this.statConfig3[0].num2 = once.all || 0;

                this.statConfig3[1].num1 = remote.handling || 0;
                this.statConfig3[1].num2 = remote.all || 0;

                this.statConfig3[2].num1 = online.handling || 0;
                this.statConfig3[2].num2 = online.all || 0;

                this.statConfig3[3].num1 = order.handling || 0;
                this.statConfig3[3].num2 = order.all || 0;
            });
        },
        /**
         * 初始化统计数量
         */
        initStatConfig() {
            let tempArr1 = [],
                tempArr2 = [],
                tempArr3 = [];

            for (var i in defaultStatconfig1) {
                tempArr1.push(defaultStatconfig1[i]);
            }
            for (var i in defaultStatconfig2) {
                tempArr2.push(defaultStatconfig2[i]);
            }
            for (var i in defaultStatconfig3) {
                tempArr3.push(defaultStatconfig3[i]);
            }
            this.statConfig1 = tempArr1;
            this.statConfig3 = tempArr3;
        },
        /**
         * tab切换
         */
        onTabChange(item, index) {
            this.currentTabIndex = index;
            Pubsub.publish("refreshDpData", { type: item.type });
        }
    }
};
</script>

<style lang="scss" scoped>
.left {
    padding: 0 19px 16px 13px;
    box-sizing: border-box;
}
.left-title {
    height: 100px;
    display: flex;
    position: relative;
    padding-bottom: 14px;
    box-sizing: border-box;
    align-items: flex-end;
    .tab-btn {
        position: relative;
        margin-right: 10px;
        z-index: 999;
        span {
            color: #fff;
            position: absolute;
            left: 34px;
            top: 8px;
        }
    }
    .date-row {
        margin-left: -105px;
        margin-bottom: 3px;
        position: relative;
        font-family: "Regular";
        .date-row-wrapper {
            height: 36px;
            width: 303px;
            position: absolute;
            bottom: 3px;
            right: 14px;
            display: flex;
            align-items: center;
            font-size: 24px;
            .date {
                margin-left: 40px;
                margin-right: 50px;
            }
            .week{
                font-family: "SSZHJT";
                font-size: 20px;
            }
        }
    }
}
.left-content1 {
    height: 458px;
    width: calc(100% - 20px);
    background: url("../../assets/dp1/left-content-bg1.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .title1 {
        position: absolute;
        left: 52px;
        top: 4px;
    }

    .stat-container {
        width: 100%;
        padding-top: 23px;
        padding-bottom: 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
    }
    .stat-row {
        margin-right: 25px;
        position: relative;
        .stat-title {
            position: absolute;
            width: 110px;
            text-align: center;
            top: 9px;
            font-size: 12px;
        }
        .stat-num {
            position: absolute;
            width: 110px;
            text-align: center;
            color: #fff000;
            bottom: 5px;
            font-size: 20px;
        }
    }
}
.stat-text1 {
    position: absolute;
    top: -20px;
    left: 50px;
}
.stat-text2 {
    position: absolute;
    top: -35px;
    left: 64px;
}
.stat-text3 {
    position: absolute;
    top: -23px;
    left: 75px;
}
#stat1 {
    height: 300px;
    width: 300px;
}
#stat5 {
    width: 200px;
    height: 81px;
}
.stat2 {
    height: 300px;
    width: 250px;
}
.stat3 {
    height: 300px;
    width: 300px;
}

.left-content2 {
    height: 338px;
    width: calc(100% - 20px);
    background: url("../../assets/dp1/left-content-bg2.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding-top: 33px;
    box-sizing: border-box;
    &-title {
        height: 98px;
        display: flex;
        justify-content: flex-end;
        padding-right: 18px;
        .title-row {
            position: relative;
            margin-right: 15px;
            img {
                width: 260px;
            }
        }
        .title-text {
            position: absolute;
            height: 32px;
            width: 100px;
            text-align: center;
            line-height: 32px;
            color: #a6ceff;
            font-size: 12px;
            left: 77px;
        }
        .title-info {
            height: 48px;
            width: 260px;
            box-sizing: border-box;
            padding-left: 6px;
            position: absolute;
            display: flex;
            top: 28px;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            .info1 {
                width: 88px;
            }
            .info2 {
                width: 70px;
                text-align: center;
                font-size: 20px;
            }
            .info3 {
                width: 90px;
                // text-align: right;
            }
        }
        .bjl-text {
            color: #a5cdff;
            position: absolute;
            bottom: 13px;
            width: 260px;
            text-align: center;
            font-size: 12px;
        }
    }
    &-stat {
        display: flex;
        padding: 0 15px;
        .zwsp-row {
            width: 230px;
            position: relative;
        }
        .zwsp-text {
            position: absolute;
            left: 28px;
            bottom: 6px;
        }
        .zwsp-percent-container {
            height: 161px;
            width: 154px;
            background: url("../../assets/dp1/left-bjl.png") no-repeat;
            background-size: 100% 100%;
            margin-left: 36px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    }
    .sl-stat {
        width: 280px;
        padding-top: 10px;
        .sl-stat-row {
            height: 55px;
            width: 55px;
            border-radius: 3px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            border: 1px dashed #0474fe;
            font-size: 12px;
            .sl-stat-num {
                font-size: 16px;
                margin-bottom: 3px;
                color: #00f6ff;
            }
        }
        .window-top-title {
            display: flex;
            align-items: center;
            margin: 10px 0;
            span {
                margin-right: 10px;
                font-size: 12px;
            }
        }
    }
    .fl-stat {
        width: 320px;
        padding-top: 15px;
        &-title {
            position: relative;
            display: flex;
            padding-right: 15px;
            justify-content: flex-end;
            .fl-title-text {
                position: absolute;
                bottom: -3px;
                display: block;
                width: 263px;
                text-align: center;
                box-sizing: border-box;
            }
        }
        &-row {
            margin-right: 15px;
            padding-top: 20px;
            .stat-row-title {
                margin-bottom: 10px;
                text-align: center;
                font-size: 12px;
                color: #00d8e6;
            }
        }
        &-num {
            font-size: 18px;
            color: #fffc00;
            position: absolute;
            top: 0;
            height: 68px;
            width: 68px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        &-total {
            text-align: center;
            width: 68px;
            height: 29px;
            position: absolute;
            bottom: 0;
            line-height: 29px;
        }
    }
    .window-label {
        width: 75px;
        height: 23px;
        background-color: #1a36a9;
        border-radius: 3px;
        font-size: 12px;
        margin-bottom: 4px;
        text-align: center;
        line-height: 23px;
    }
}
.zwsp-circle {
    position: absolute;
    height: 105px;
    width: 105px;
    top: 29px;
    left: 25px;
    animation: circleRotate 4s linear infinite;
}
@keyframes circleRotate {
    to {
        transform: rotate(360deg);
    }
    from {
        transform: rotate(0deg);
    }
}
.zwsp-num {
    color: #fff000;
    font-size: 32px;
}
.info-label {
    width: 60px;
    text-align: right;
    display: inline-block;
}
</style>
<style>
/* .zwsp-num > .number-animate {
    font-size: 26px !important;
    height: 26px;
}
.zwsp-num .number-animate .number-animate-dom{
    width:21px !important;
}
.zwsp-num .number-animate-span{
    height:26px !important;
    line-height: 32px !important;
} */

.bj-num > .number-animate {
    font-size: 14px !important;
    line-height: 14px;
    height: 14px;
}
.bj-num .number-animate .number-animate-dom{
    width:8px !important;
}
.bj-num .number-animate-span{
    height:14px !important;
    line-height: 1.25 !important;
}
</style>
